<template>
    <view>
        <view class="loggo">
            <image src="../../static/img/loginimg.png"></image>
        </view>
        <view class="login-phone">
            <view class="lxc">
                <image src="../../static/img/usernum.png"></image>
                <input placeholder-style="color:#ADB0BB" type="text" placeholder="请输入用户名" v-model="userNamePhone" />
            </view>
        </view>
        <view class="login-phone">
            <view class="lxc">
                <image src="../../static/img/loginpwd.png"></image>
                <input placeholder-style="color:#ADB0BB" type="password" placeholder="请输入登录密码" v-model="userPwdPhone" />
            </view>
        </view>
        <button class="login" @click="loginFn">立即登录</button>
        <view class="botm">
            <navigator url="/pages/register/register" open-type="navigate" hover-class="none">
                <text>免费注册</text>
            </navigator>
            <!-- <view></view>
            <navigator url="/pages/resetpwd/resetpwd" open-type="navigate" hover-class="none">
                <text>忘记密码</text>
            </navigator> -->
        </view>
    </view>
</template>

<script>
    import request from "../../untils/request.js";
    import {
        mapMutations
    } from "vuex";
    export default {
        data() {
            return {
                userNamePhone: "",
                userPwdPhone: "",
                //userPwdyzm: "",
                rules: {
                    userNamePhone: {
                        rule: /^1[3456789]\d{9}$/,
                        msg: "手机号或邮箱格式错误",
                    },
                    userPwdPhone: {
                        rule: /^[a-z0-9A-Z]/,
                        msg: "请输入登录密码",
                    },
                },
                //验证码按钮
                codeBtn: {
                    codeTime: 60,
                    codeText: "获取验证码",
                    codeStatus: true,
                },
                opinSign: true,
            }
        },
        onLoad() {
        },
        onShow() {
            this.userNamePhone = "";
            this.userPwdPhone = "";
            if (uni.getStorageSync('userInfo').token != undefined) {
                uni.switchTab({
                    url: '/pages/index/index',
                });
            }
        },
        methods: {
            ...mapMutations(["login"]),
            //登录
            loginFn() {
				if (!this.userNamePhone.trim() || !this.userPwdPhone.trim()) {
				        uni.showToast({
				          title: '用户名和密码不能为空',
				          icon: 'none',
				        });
				        return;
			    }
                uni.showLoading({
                    mask:true
                });
                request.postLoginris('/user/login/loginToken', {
                    accountNumber: this.userNamePhone,
                    clientId: "xdcloud-client-buc",
                    clientSecret: "huangjianwen",
                    loginMode: "pwd",
                    password: this.userPwdPhone ,
                    //verifyCode: this.userPwdyzm //验证码
                }).then(res => {

                    if (res.code == '200') {
                        this.login(res.data);
                        uni.hideLoading();
                        uni.switchTab({
                            url: '/pages/index/index',
                        });
                    } else {
                        uni.hideLoading();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
            validate(key) {
                let bool = true;
                if (!this.rules[key].rule.test(this[key])) {
                    //提示信息
                    uni.showToast({
                        icon: "none",
                        title: this.rules[key].msg,
                    });
                    //取反
                    bool = false;
                    return false;
                }
                return bool;
            },
        }
    }
</script>

<style>
    .loggo {
        padding: 42rpx 0 96rpx;
        text-align: center;
    }

    .loggo image {
        width: 300rpx;
        height: 300rpx;
    }

    .login-phone {
        display: flex;
        justify-content: space-between;
        margin: 0 116rpx 20rpx;
        border-bottom: 1px solid #7F6AC3;
        height: 120rpx;
        align-items: center;
    }

    .login-phone .lxc {
        display: flex;
    }

    .login-phone image {
        width: 38rpx;
        height: 38rpx;
        margin: 0 20rpx 0 20rpx;
    }

    .login {
        margin: 160rpx 116rpx 0;
        width: 260px;
        height: 38px;
        background: #7F6AC3;
        border-radius: 19px;
        line-height: 38px;
        font-size: 14px;
		color: #FFFFFF;
    }

    .lxc input {
        font-size: 14px;
    }

    .lxc .yzms {
        margin: 0 0 0 10px;

    }

    .phone-code {
        font-size: 14px;
        font-weight: 400;
        line-height: 33rpx;
        color: #FEAE25;
        margin: 0 10px 0 0;
    }

    .botm {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0 0 0;
    }

    .botm text {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #757575;
    }

    .botm view {
        width: 1px;
        height: 14px;
        background: #E6E6E6;
        margin: 0 18px;
    }
</style>
